<!DOCTYPE html>
<html>
<head>
    <title>Particle Heart Animation</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="heartCanvas"></canvas>

    <script>
        const canvas = document.getElementById('heartCanvas');
        const ctx = canvas.getContext('2d');

        // 设置画布尺寸
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 粒子配置
        const particleCount = 1500;
        const particles = [];
        let scale = 1;
        let direction = 1;

        // 爱心参数方程
        function heartPath(t) {
            const x = 16 * Math.pow(Math.sin(t), 3);
            const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
            return {x, y};
        }

        // 粒子类
        class Particle {
            constructor() {
                const t = Math.random() * 2 * Math.PI;
                const {x, y} = heartPath(t);
                
                this.baseX = x;
                this.baseY = y;
                this.x = x;
                this.y = y;
                this.size = Math.random() * 2 + 1;
                this.alpha = Math.random() * 0.5 + 0.5;
                this.color = `hsla(${Math.random() * 60 + 300}, 100%, 50%, ${this.alpha})`;
            }

            update() {
                this.x = this.baseX * scale;
                this.y = this.baseY * scale;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(
                    canvas.width/2 + this.x * 10,
                    canvas.height/2 - this.y * 10,
                    this.size,
                    0, Math.PI * 2
                );
                ctx.fill();
            }
        }

        // 初始化粒子
        function init() {
            particles.length = 0;
            for(let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
        }

        // 动画循环
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 呼吸效果
            scale += 0.005 * direction;
            if(scale > 1.2 || scale < 0.8) direction *= -1;

            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

            requestAnimationFrame(animate);
        }

        // 窗口变化处理
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

        init();
        animate();
    </script>
</body>
</html>